<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS权重比较(Cascading Style Sheets Weight Comparison)</title>
  <!-- 
    CSS中的“权重”（weight）指的是样式规则的优先级，用于确定在多个规则应用于同一元素时哪一个规则会生效。以下是关于CSS权重的说明总结： 
 
      1. 内联样式：具有最高优先级，即在元素标签中直接指定的样式。 
      2. ID选择器：具有较高优先级，通过ID选择器指定的样式规则。 
      2. 交集选择器: 具有中上等优先级，通过交集选择器指定的样式规则。
      3. 类选择器、属性选择器和伪类：具有中等优先级，通过类、属性或伪类选择器指定的样式规则。 
      4. 元素选择器：具有较低优先级，通过元素选择器指定的样式规则。 
      5. 通用选择器和子选择器：优先级较低，应用于所有元素或特定父元素下的子元素。 
      6. !important：具有无穷高优先级，可以用于覆盖任何其他样式规则。
      
      在CSS中，权重的计算方式是通过将不同选择器的权重值进行比较，权重值高的样式规则会覆盖权重值低的规则。
      权重值高的选择器包括：内联样式、ID选择器、类选择器、属性选择器和伪类选择器。权重值低的选择器包括：元素选择器、通用选择器和子选择器。
   -->
   <style>
      /* !important-权重值最高，优先级最高 super max 1000000...*/
      div.weight {
        color: saddlebrown !important; 
      }

      /* ID选择器-具有较高优先级 100 */
      #weight {
        color: seagreen;
      }

      /* 交集选择器-具有中上等优先级 50 */
      div.weight {
        color: skyblue;
      }


      /* 类选择器-具有中等优先级 10 */
      .weight {
        color: red; 
      }

      /* 元素选择器-较低优先级 1 */
      div {
        color: salmon;
      }
      
      /* 通用选择器-权重值最低 0 */
      * {
        color: yellow;
      }

      /* 补充: 继承属性和自身属性  */
      .container {
        color: red !important;
      }
      
      /* 自身属性永远大于继承属性 */
      .children-attribute {
        color: chocolate;
      }
   </style>
</head>
<body>

  <!-- 内联样式-最高优先级: 1000 -->
  <div class="weight one two" id="weight" style="color: slateblue;">
    CSS中的“权重”（weight）指的是样式规则的优先级，用于确定在多个规则应用于同一元素时哪一个规则会生效。
  </div>

  <!-- 补充: 继承属性和自身属性 -->
  <div class="container">
    继承属性
    <div class="children-attribute">自身属性</div>
  </div>
  
</body>
</html>